<template>
  <div v-if="GLOBAL.sysUserVisible=='1'">
    <el-container>
      <span >学校概况 >></span>
      <span style="color: #20a0ff"> &nbsp&nbsp{{this.universityName}}&nbsp&nbsp&nbsp&nbsp</span>
      <el-main>
        <el-form ref="searchForm" :model="queryInfo" label-width="20px">
          <el-row gutter="20">
            <el-col :span="3" offset="16">
              <el-select  v-model="yiyuLabel" size="small" filterable clearable placeholder="抑郁程度" clearable>
                <el-option
                  v-for="item in this.yiyuList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-col>
            <el-col :span="3" >
              <el-select v-model="sType" size="small" filterable clearable placeholder="学生类型" clearable>
                <el-option
                  v-for="item in this.sList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-col>
            <el-col :span="2"  >
              <el-button type="primary" size="mini" @click="initData">搜索</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-main>

    </el-container>
    <el-container>
      <el-main>
        <el-card >
          <div id="bar1">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main1" style="float:left;width:100%;height: 300px"></div>
          </div>
        </el-card>
        <el-header height="40px"></el-header>
      </el-main>
    </el-container>
    <el-container>
      <el-main>
        <el-card style="height: 100%;width:50%">
          <div style="display:flex">
            <div style="margin:auto">
              <el-table
                :data="tableData"
                stripe
                :row-style="{height:'45px'}"
                :cell-style="{padding:'0px'}"
                style="font-size: 14px;width: 100%"
                :header-cell-style="{background:'#eef1f6',color:'#606266',height:'45px'}">
                <el-table-column
                  prop="index"
                  label="序号"
                  width="80">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="学院名称"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="num"
                  label="人数"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="ratio"
                  label="比例"
                  width="100">
                </el-table-column>
                <el-table-column  align="center" label="设置" width="100">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="showInfo( scope.row)">查看详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
    export default {
        name: "collegeDistribution",
        data() {
            return {
                collegeData:[],//学院人数分布柱状图
                universityName:"",
                barX:{data:[]},//柱状图x轴
                barSeries:[{name: '数量', type: 'bar', barWidth : 60,data:[]}],//柱状图数据
                tableData:[],
                sType:"",
                yiyuLabel:"",
                sList:[{
                    label:'初中',
                    value: 3
                }, {
                    label:'高中',
                    value: 4
                },{
                    label:'大专',
                    value: 5
                }, {
                    label:'本科',
                    value: 0
                },{
                    label:'硕士',
                    value: 1
                }, {
                    label:'博士',
                    value: 2
                }],
                yiyuList:[{
                    label:'轻度抑郁',
                    value: 0
                }, {
                    label:'中度抑郁',
                    value: 1
                },{
                    label:'重度抑郁',
                    value: 2
                }]
            }
        },
        created() {
            this.initData();
        },
        watch:{
            collegeData() {
                this.$nextTick(() => {
                    //此时就可以获取到在created赋值后的dataList了
                    this.initBarEcharts();

                })
            },
        },
        methods:{
            showInfo(row){
                this.$router.push({path:"/home/collegeProvince",query:{info:row,universityName:this.universityName}});
            },
            initData(){
                this.$axios.post("managementSystem/user/personalInfo")
                    .then(data => {
                        if (data.status != 200) {
                            this.$message.error('服务出错' + data.status);
                        } else {
                            if (data.data.errorCode == '200') {
                                this.universityName = data.data.data["university"]
                            }
                        }
                    })
                //sType:学生类别  【"" 所有都有   0 本科 1硕士 2博士 3初中 4高中 5大专】
                //yiyuLabel：代表查询抑郁的程度 【"" 所有都有   0 轻度抑郁  1 中度抑郁  2 重度抑郁】
                this.$axios.post("managementSystem/report/collegeStuNum",{"sType":this.sType,"yiyuLabel":this.yiyuLabel})
                    .then(data => {
                        if (data.status != 200) {
                            this.$message.error('服务出错' + data.status);
                        } else {
                            if (data.data.errorCode == '200') {
                                //后面修改为具体接口
                                var total = 0
                                // this.collegeData = [{"id": 1, "name": "计算机", "num": 20}, {
                                //     "id": 1,
                                //     "name": "数学",
                                //     "num": 35
                                // }, {"id": 1, "name": "自动化", "num": 15}, {"id": 1, "name": "软件", "num": 12}, {
                                //     "id": 1,
                                //     "name": "化学",
                                //     "num": 22
                                // }, {"id": 1, "name": "机械", "num": 30}, {"id": 1, "name": "人工智能", "num": 17}]
                                this.collegeData=data.data.data
                                this.barX.data=[]
                                this.barSeries[0]["data"]=[]
                                for (var i = 0; i < this.collegeData.length; i++) {
                                    this.barX.data.push(this.collegeData[i]["name"])
                                    this.barSeries[0]["data"].push(this.collegeData[i]["num"])
                                    total += this.collegeData[i]["num"]
                                }
                                this.tableData = this.collegeData
                                for (var i in this.tableData) {
                                    this.tableData[i]["index"] = parseInt(i) + 1;
                                    this.tableData[i]["ratio"] = (this.tableData[i]["num"] / total).toFixed(2) + "%"
                                }
                            }
                        }
                    })
            },
            initBarEcharts(){
                // 实例化echarts对象
                console.log(document.getElementById('main1'))
                let myChartDrawer = this.$echarts.init(document.getElementById('main1'))

                // 绘制条形图
                var option = {
                    title: {
                        text: '学院人数分布',
                        x:'center',//x轴方向对齐方式
                    },
                    legend: {
                        data: ['数量'],
                        top: 5,
                        x:'right',//x轴方向对齐方式
                        padding:[30,70,0,0]
                    },
                    //X轴
                    xAxis: this.barX,
                    // Y轴
                    yAxis: {},
                    // 数据
                    series:this.barSeries
                };

                myChartDrawer.setOption(option);
            },
        }
    }
</script>

<style scoped>
  .el-main {
    color: #333;
    /* text-align: center; */
    line-height: 20px !important;
  }
</style>
